<template>
  <div class="history-hot">
    <div class="historyh">
      <div class="top">
        <h4>历史记录</h4>
        <!-- vant图标，要去vantui里引入 -->
        <van-icon @click="del()" name="delete-o" />
      </div>
      <div class="bon">
        <!-- vant图标，要去vantui里引入 -->
        <!-- 遍历数据 -->
        <van-tag
          v-for="(item,index) in history"
          :key="index"
          plain
          @click="input(item)"
          type="default"
        >{{item}}</van-tag>
      </div>
    </div>

    <div class="historyh hot">
      <div class="top">
        <h4>热门搜索</h4>
      </div>
      <div class="bon">
        <van-tag
          v-for="(item,index) in hot"
          :key="index"
          plain
          @click="input(item.keyword)"
          :type="item.is_hot?'danger':'default'"
        >{{item.keyword}}</van-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { GetDelHistory } from "@/request/api.js";
export default {
  // 父传子  过来的数据  就是接口的数据
  props: ["history", "hot"],
  data() {
    return {
      // a: "",
    };
  },
  methods: {
    // 子传父
    input(a) {
      // console.log(a);
      this.$emit("zidingyi", a);
    },
    // 删除历史记录
    del() {
      // 这里需要请求头，请求头写在了request中，所以这里都不用写了
      GetDelHistory().then(res => {
        // 删除完，原地刷新
        this.$router.go(0)
      });
    }
  },
  components: {}
};
</script>

<style lang='less' scoped>
.historyh {
  background-color: #fff;
  padding: 0.1rem;
  .top {
    display: flex;
    justify-content: space-between;
  }
  .bon {
    .van-tag {
      margin-top: 0.1rem;
      margin-right: 0.1rem;
    }
  }
}
.hot {
  margin-top: 0.2rem;
}
</style>
